<template>
  <div class="GreetingCardMine">
    <div class="part1">
      <div class="part11-empty" v-if="!luckList.length">
        <div>
          <img class="part11-empty1" src="./img/empty.png" alt="" />
          <p>当前没有任何记录哦～</p>
        </div>
      </div>
      <div class="part11" v-for="(item, index) in luckList" :key="index">
        <div class="part11-1">
          <p class="part11-11">{{ item.outlets }}元立减金</p>
          <p class="part11-12">{{ item.updateTime }} 兑换</p>
        </div>
        <div class="part11-2">
          ￥<span class="part11-21">{{ item.outlets }}</span>
        </div>
      </div>
    </div>
    <div class="emptyBox"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      luckList: [],
    }
  },
  mounted() {
    this.$api.bussinessApi
      .receive_list({
        companyId: localStorage.companyId,
        openId: localStorage.user,
      })
      .then((res) => {
        this.luckList = res.rows
      })
      .catch((err) => {
        uni.showToast({
          icon: 'error',
          title: err.msg || '网络异常',
        })
      })
  },
}
</script>

<style lang="scss" scoped>
.emptyBox {
  height: 98rpx;
}
.GreetingCardMine {
  padding-top: 50rpx;
  .part1 {
    padding: 0 30rpx;
    .part11-empty {
      height: 80vh;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: #898b8d;
      font-size: 26rpx;
      line-height: 37rpx;
      .part11-empty1 {
        margin-bottom: 53rpx;
        width: 423rpx;
        height: 323rpx;
        animation: move1 infinite 2s;
      }
      @keyframes move1 {
        0% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-10px);
        }
        100% {
          transform: translateY(0);
        }
      }
    }
    .part11 {
      background: #fff;
      box-shadow: 0px 4rpx 30rpx 0px #eceff1;
      border-radius: 16rpx;
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;
      .part11-1 {
        flex: 1;
        padding-left: 50rpx;
        .part11-11 {
          font-size: 30rpx;
          font-weight: bold;
          line-height: 30rpx;
        }
        .part11-12 {
          font-size: 24rpx;
          color: #c1c1c1;
          line-height: 24rpx;
          margin-top: 20rpx;
        }
      }
      .part11-2 {
        text-align: center;
        width: 224rpx;
        font-size: 34rpx;
        background: var(--main-color);
        border-radius: 0 16rpx 16rpx 0;
        height: 152rpx;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        .part11-21 {
          font-size: 58rpx;
        }
      }
    }
  }
}
</style>
